<script lang="ts">
  import { computed, defineComponent, PropType, ref, toRefs } from '@vue/composition-api';

  export type PropsType = {
    value: string;
    selectValue: string;
    list: Array<any>;
  };

  export default defineComponent({
    props: {
      selectValue: {
        type: String as PropType<PropsType['selectValue']>,
        require: true
      },
      list: {
        type: Array as PropType<PropsType['list']>,
        default: () => {
          return [];
        }
      }
    },
    setup(props, { emit }) {
      const { selectValue } = toRefs(props);
      const show = ref(false);
      const defaultValue = computed(() => {
        const { list } = props;
        for (let i = 0; i < list.length; i++) {
          const value = typeof list[i].value === 'number' ? String(list[i].value) : list[i].value;
          if (value === selectValue?.value) {
            return [i];
          }
        }
        return [0];
      });

      function confirm(
        value: Array<{
          label: string;
          value: number;
        }>
      ) {
        emit('input', value[0].value);
      }

      function openSelect() {
        show.value = true;
        console.log(props.selectValue);
      }

      return {
        show,
        defaultValue,
        openSelect,
        confirm
      };
    }
  });
</script>

<template>
  <view class="oto-select" @click.stop="openSelect">
    <slot></slot>
    <u-select
      :default-value="defaultValue"
      v-model="show"
      mode="single-column"
      :list="list"
      @confirm="confirm"
    ></u-select>
  </view>
</template>

<style lang="scss" scoped>
  .oto-select {
  }
</style>
